<template>
  <form-dialop
    :title="title"
    :visible="visible"
    width="65%"
    @handleClose="handleClose"
  >
    <template #content>
      <!-- <el-scrollbar class="md-detail">
        <div v-html="htmlData" class="w-e-text"></div>
      </el-scrollbar> -->
      <div class="md-detail">
        <div v-html="htmlData" class="w-e-text"></div>
      </div>
    </template>
    <template #footer>
      <el-button type="primary" @click="handleClose">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '@/components/Dialog/formDialog2.vue';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      htmlData: '',
      title: ''
    }
  },
  methods: {
    init(row: any) {
      this.title = row.version_number
      this.htmlData = row.content
      this.visible = true;
    },
    handleClose() {
      this.visible = false;
			this.loading = false;
    }
  }
})
</script>
<style scoped lang="scss">
.md-detail {
  height: calc(100vh - 350px);
  overflow-x: hidden;
  flex-grow: 1;
}

/* table 样式 */
table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
table td,
table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
pre code {
  display: block;
}

/* ul ol 样式 */
ul, ol {
  margin: 10px 0 10px 20px;
}
</style>
